<template>
  <button class="tui-button" :class="[typeClass, customClass, sizeClass, disabledClass, loadingClass, plainClass, roundClass, circleClass, textClass, linkClass]" :style="buttonStyle" :disabled="disabled || !!loading" @click="handleClick" :type="htmlType">
    <tui-icon v-if="icon && !loading" :icon="icon" class="tui-button__icon"></tui-icon>
    <tui-icon v-if="loading" :icon="typeof loading === 'string' ? loading : 'tui:loading'" animation="spin" class="tui-button__icon"></tui-icon>
    <span class="tui-button__text" v-if="$slots.default || text" :style="strokeAnimationStyle">
      <slot v-if="$slots.default"></slot>
      <template v-else>{{ text }}</template>
    </span>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useAnimationStyle } from '../../animation/animationManager';
import { generateColorVariants } from '../../color/helpers';
import { TuiButtonProps } from './types';

const props = withDefaults(defineProps<TuiButtonProps>(), {
  type: 'default',
  size: 'medium',
  disabled: false,
  loading: false,
  icon: '',
  plain: false,
  round: false,
  circle: false,
  text: false,
  link: false,
  color: '',
  stroke: false,
  htmlType: 'button',
});


const emit = defineEmits<{
  (e: 'click', event: MouseEvent): void;
}>();

const handleClick = (event: MouseEvent) => {
  if (!props.disabled && !props.loading) {
    emit('click', event);
  }
};

const typeClass = computed(() => props.color ? '' : `tui-button--${props.type}`);
const sizeClass = computed(() => `tui-button--${props.size}`);
const disabledClass = computed(() => props.disabled ? 'tui-button--disabled' : '');
const loadingClass = computed(() => props.loading ? 'tui-button--loading' : '');
const plainClass = computed(() => props.plain ? 'tui-button--plain' : '');
const roundClass = computed(() => props.round ? 'tui-button--round' : '');
const circleClass = computed(() => props.circle ? 'tui-button--circle' : '');
const textClass = computed(() => props.text ? 'tui-button--text' : '');
const linkClass = computed(() => props.link ? 'tui-button--link' : '');
const customClass = computed(() => props.color ? 'tui-button--custom' : '');

// 计算按钮样式 - 设置CSS变量
// 计算描边动画样式
const strokeAnimationStyle = computed(() => {
  if (!props.stroke) return {};
  let strokeColor;

  if (props.color) {
    // 如果设置了自定义颜色，生成其dark-4变体
    const colorVariants = generateColorVariants(props.color, 'custom');
    strokeColor = colorVariants['custom-dark-4'];
  } else {
    // 如果没有自定义颜色但有类型，使用对应类型的dark-4颜色
    strokeColor = `var(--tui-color-${props.type}-dark-4, var(--tui-color-dark-4))`;
  }
  return useAnimationStyle({
    name: 'stroke-glow',
    params: {
      'color': strokeColor
    }
  });
});

// 计算按钮样式 - 设置CSS变量
const buttonStyle = computed(() => {
  if (!props.color) return {};

  const colorVariants = generateColorVariants(props.color, 'custom');
  return {
    '--tui-color-custom': colorVariants.custom,
    '--tui-color-custom-light-3': colorVariants['custom-light-3'],
    '--tui-color-custom-light-9': colorVariants['custom-light-9']
  };
});
</script>

<style lang="scss" scoped>
// 按钮组样式
.tui-button-group {

  // 确保中间按钮没有圆角
  >.tui-button:not(:first-child):not(:last-child) {
    border-radius: var(--tui-border-radius-none);
  }

  &.tui-button-group--horizontal {

    // 水平排列时的按钮样式
    >.tui-button:first-child {
      border-top-right-radius: var(--tui-border-radius-none);
      border-bottom-right-radius: var(--tui-border-radius-none);
    }

    >.tui-button:last-child {
      border-top-left-radius: var(--tui-border-radius-none);
      border-bottom-left-radius: var(--tui-border-radius-none);
    }
  }

  // 垂直排列时的圆角样式
  &.tui-button-group--vertical {

    >.tui-button:first-child {
      border-bottom-left-radius: var(--tui-border-radius-none);
      border-bottom-right-radius: var(--tui-border-radius-none);
    }

    >.tui-button:last-child {
      border-top-left-radius: var(--tui-border-radius-none);
      border-top-right-radius: var(--tui-border-radius-none);
    }
  }
}

// 基础样式
.tui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
  border-width: var(--tui-border-width);
  border-style: var(--tui-border-style);
  outline: none;
  gap: 4px;

  // 类型基础样式
  &.tui-button--default {
    background-color: var(--tui-color-white);
    color: var(--tui-color-text-primary);
    border-color: var(--tui-border-color);

    &:hover {
      background-color: var(--tui-color-primary-light-9);
      color: var(--tui-color-primary);
    }
  }

  &.tui-button--primary {
    background-color: var(--tui-color-primary);
    color: var(--tui-color-white);
    border-color: var(--tui-color-primary);

    &:hover {
      background-color: var(--tui-color-primary-light-3);
      color: var(--tui-color-white);
      border-color: var(--tui-color-primary-light-3);
    }
  }

  &.tui-button--success {
    background-color: var(--tui-color-success);
    color: var(--tui-color-white);
    border-color: var(--tui-color-success);

    &:hover {
      background-color: var(--tui-color-success-light-3);
      color: var(--tui-color-white);
      border-color: var(--tui-color-success-light-3);
    }
  }

  &.tui-button--info {
    background-color: var(--tui-color-info);
    color: var(--tui-color-white);
    border-color: var(--tui-color-info);

    &:hover {
      background-color: var(--tui-color-info-light-3);
      color: var(--tui-color-white);
      border-color: var(--tui-color-info-light-3);
    }
  }

  &.tui-button--warning {
    background-color: var(--tui-color-warning);
    color: var(--tui-color-white);
    border-color: var(--tui-color-warning);

    &:hover {
      background-color: var(--tui-color-warning-light-3);
      color: var(--tui-color-white);
      border-color: var(--tui-color-warning-light-3);
    }
  }

  &.tui-button--danger {
    background-color: var(--tui-color-danger);
    color: var(--tui-color-white);
    border-color: var(--tui-color-danger);

    &:hover {
      background-color: var(--tui-color-danger-light-3);
      color: var(--tui-color-white);
      border-color: var(--tui-color-danger-light-3);
    }
  }

  &.tui-button--custom {
    background-color: var(--tui-color-custom);
    color: var(--tui-color-white);
    border-color: var(--tui-color-custom);

    &:hover {
      background-color: var(--tui-color-custom-light-3);
      color: var(--tui-color-white);
      border-color: var(--tui-color-custom-light-3);
    }
  }

  // 朴素按钮样式
  &.tui-button--plain {
    background-color: transparent;

    &.tui-button--default {
      color: var(--tui-color-text-primary);
      border-color: var(--tui-color-border);

      &:hover {
        color: var(--tui-color-primary);
        border-color: var(--tui-color-primary);
      }
    }

    &.tui-button--primary {
      color: var(--tui-color-primary);
      border-color: var(--tui-color-primary);
      background-color: var(--tui-color-primary-light-9);

      &:hover {
        background-color: var(--tui-color-primary);
        color: var(--tui-color-white);
      }
    }

    &.tui-button--success {
      color: var(--tui-color-success);
      border-color: var(--tui-color-success);
      background-color: var(--tui-color-success-light-9);

      &:hover {
        background-color: var(--tui-color-success);
        color: var(--tui-color-white);
      }
    }

    &.tui-button--info {
      color: var(--tui-color-info);
      border-color: var(--tui-color-info);
      background-color: var(--tui-color-info-light-9);

      &:hover {
        background-color: var(--tui-color-info);
        color: var(--tui-color-white);
      }
    }

    &.tui-button--warning {
      color: var(--tui-color-warning);
      border-color: var(--tui-color-warning);
      background-color: var(--tui-color-warning-light-9);

      &:hover {
        background-color: var(--tui-color-warning);
        color: var(--tui-color-white);
      }
    }

    &.tui-button--danger {
      color: var(--tui-color-danger);
      border-color: var(--tui-color-danger);
      background-color: var(--tui-color-danger-light-9);

      &:hover {
        background-color: var(--tui-color-danger);
        color: var(--tui-color-white);
      }
    }

    &.tui-button--custom {
      background-color: var(--tui-color-custom-light-9);
      color: var(--tui-color-custom);
      border-color: var(--tui-color-custom);

      &:hover {
        background-color: var(--tui-color-custom);
        color: var(--tui-color-white);
        border-color: var(--tui-color-custom);
      }
    }
  }

  // 文本按钮样式
  &.tui-button--text {
    background-color: transparent;
    border: none;

    &.tui-button--default {
      color: var(--tui-color-text-primary);

      &:hover {
        background-color: var(--tui-color-primary-light-9);
      }
    }

    &.tui-button--primary {
      color: var(--tui-color-primary);

      &:hover {
        background-color: var(--tui-color-primary-light-9);
      }
    }

    &.tui-button--success {
      color: var(--tui-color-success);

      &:hover {
        background-color: var(--tui-color-success-light-9);
      }
    }

    &.tui-button--info {
      color: var(--tui-color-info);

      &:hover {
        background-color: var(--tui-color-info-light-9);
      }
    }

    &.tui-button--warning {
      color: var(--tui-color-warning);

      &:hover {
        background-color: var(--tui-color-warning-light-9);
      }
    }

    &.tui-button--danger {
      color: var(--tui-color-danger);

      &:hover {
        background-color: var(--tui-color-danger-light-9);
      }
    }

    &.tui-button--custom {
      color: var(--tui-color-custom);

      &:hover {
        background-color: var(--tui-color-custom-light-9);
      }
    }
  }

  // 链接按钮样式
  &.tui-button--link {
    background-color: transparent;
    border: none;

    &:hover {
      background-color: transparent;
    }

    &.tui-button--default {
      color: var(--tui-color-text-primary);

      &:hover {
        color: var(--tui-color-text-regular);
      }
    }

    &.tui-button--primary {
      color: var(--tui-color-primary);

      &:hover {
        color: var(--tui-color-primary-light-3);
      }
    }

    &.tui-button--success {
      color: var(--tui-color-success);

      &:hover {
        color: var(--tui-color-success-light-3);
      }
    }

    &.tui-button--info {
      color: var(--tui-color-info);

      &:hover {
        color: var(--tui-color-info-light-3);
      }
    }

    &.tui-button--warning {
      color: var(--tui-color-warning);

      &:hover {
        color: var(--tui-color-warning-light-3);
      }
    }

    &.tui-button--danger {
      color: var(--tui-color-danger);

      &:hover {
        color: var(--tui-color-danger-light-3);
      }
    }

    &.tui-button--custom {
      color: var(--tui-color-custom);

      &:hover {
        color: var(--tui-color-custom-light-3);
      }
    }
  }

  // 禁用样式
  &--disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: var(--tui-color-gray-light-2);
    color: var(--tui-color-text-placeholder);
    border-color: var(--tui-border-color);
  }

  // 形状样式
  &--round {
    border-radius: var(--tui-border-radius-round);
  }

  &--circle {
    border-radius: var(--tui-border-radius-circle);
    padding: 0;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  // 尺寸样式
  &--smaller {
    padding: 2px;
    font-size: 10px;
    height: 18px;

    &.tui-button--circle {
      width: 18px;
    }
  }

  &--small {
    padding: 6px;
    font-size: 12px;
    height: 24px;

    &.tui-button--circle {
      width: 24px;
    }
  }

  &--medium {
    padding: 10px;
    font-size: 14px;
    height: 32px;

    &.tui-button--circle {
      width: 32px;
    }
  }

  &--large {
    padding: 14px;
    font-size: 18px;
    height: 48px;

    &.tui-button--circle {
      width: 48px;
    }
  }

  &--larger {
    padding: 18px;
    font-size: 24px;
    height: 64px;

    &.tui-button--circle {
      width: 64px;
    }
  }

  // 通用状态
  &:not(&--disabled):hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  &:not(&--disabled):active {
    transform: translateY(0);
  }

  // 图标和文本样式
  &__icon {
    width: 1em;
    height: 1em;
  }

  &__text {
    white-space: nowrap;
  }
}
</style>